<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<view class="search-index">

			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input type="text" placeholder="商城推荐好物" />
				<button class="search-button">搜索</button>
			</view>

		</view>
		<!-- 分类数据 -->
		<view class="classify-data" :style="'height:'+height+'px'">


			<view class="classify-one">
				<scroll-view scroll-y class="classify-list">

					<view class="list" :class="{ action: item.id === queryList['category_id'] }" v-for="(item,index) in categoryList"
						:key="index" @click="selectItem(item.id)">
						<text>{{item.name}}</text>
					</view>
				</scroll-view>

			</view>
			<view class="classify-two-three">
				<scroll-view scroll-y class="scroll">
					<view class="classify-two" @click="gotoGoods(item)" v-for="(item,index) in swiperList" :key="index">

						<view class="classify-three">
							<view class="image">
								<image :src="item.img_list[0]"></image>
								<view class="list">
									<view class="title">
										{{item.title}}
									</view>
									<view class="money">
										￥{{item.real_price}}
									</view>
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import {
		getAllLinesGoods,
		getCategoryList
	} from '@/config/api.js';
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				queryList:{
					page: 1,
					limit: 30,
					category_id:null
				},
				swiperList:[],
				height: 0,
				selectedIndex: null,
				categoryList: [],
				classList: ['全部', '瓷器', '书画', '玉器', '玛瑙', '佛像', '珠宝', '茶叶', '农副产品']
			};
		},
		onLoad(option){
			getCategoryList({
				nav_id:13,
			}).then(res => {
				this.categoryList = res;
			});
			if(option.id){
				this.queryList['category_id'] = option.id;
				this.getlist();
			}
		},
		onReady() {
			
			setTimeout(() => {
				uni.hideTabBar()
			}, 100)
			let info = uni.createSelectorQuery().select(".page");
			info.boundingClientRect((data) => { //data - 各种参数
				console.log(data.height);
				this.height = data.height - 100;
				// #ifdef APP-PLUS 
				this.height = data.height - 130;
				// #endif 

			}).exec();
			
		},
		methods: {
			gotoGoods(item){
				uni.navigateTo({
					url: `/moduleB/GoodsDetails/GoodsDetails?title=${encodeURIComponent(item.title+'详情')}&goodsId=${item.id}`,
				});
			},
			getlist(){
				getAllLinesGoods(this.queryList).then(res => {
					this.swiperList = res.data;
				});
			},
			selectItem(id) {
				this.queryList['category_id'] = option.id;
				this.getlist();
			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'class.scss'
</style>